<template>
<div class="check9" style="background-color: #ffffff" >
    <div class="search1">
        <div class="find">
            <form action="###" class="searchForm">
          <input
            type="text"
            placeholder="输入关键词"
            v-model="keywords"
          >
          <button
            class="btn"
            type="button"
            @click="goSearch"
          >
            搜索
          </button>
          <el-button @click="delay" style="margin-left:10px;">取消</el-button>
          <el-button @click="toggleSelection()" style="margin-left:300px">取消选择</el-button>
            <el-button @click="allRemove">删除</el-button>
            <el-button  type="info" style="float:right;margin-right:5px" @click="add">新增员工</el-button>
          </form>

        <el-dialog title="新增员工信息" :visible.sync="dialogFormVisible" >
           <el-form :model="form">
             <el-form-item label="员工账号" :label-width="formLabelWidth">
                 <el-input v-model="form.userName" autocomplete="off" style="width:217px" value="text"></el-input>
              </el-form-item>
              <el-form-item label="员工姓名" :label-width="formLabelWidth">
                 <el-input v-model="form.employeesName" autocomplete="off" style="width:217px" value="text"></el-input>
              </el-form-item>
               <el-form-item label="员工职位/权限" :label-width="formLabelWidth">

<el-select
   v-model="form.employeePosition"
   placeholder="选择员工角色"

   data-options="editable:false"
   value='text'
 >
   <el-option v-for="item in roleList"
              :key="item"
              :value="item"
              :label="item"
   >
   </el-option>
 </el-select>
            </el-form-item>

              <el-form-item label="联系方式" :label-width="formLabelWidth">
                 <el-input v-model="form.employeeContact" autocomplete="off" style="width:217px" value="number"></el-input>
              </el-form-item>
               <el-form-item label="用户密码" :label-width="formLabelWidth">
                 <el-input v-model="form.userPassword" autocomplete="off" style="width:217px" value="number"></el-input>
              </el-form-item>
      </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
               <el-button type="primary" @click="addUser(form)">确 定</el-button>
           </div>
           </el-dialog>
        </div>
  <el-table
   ref="multipleTable"
    tooltip-effect="dark"
     @selection-change="handleSelectionChange"
      class="table2"
      :data="tableData"
      style="width: 100%"
      max-height="500"
    >
    <el-table-column
      type="selection"
      width="55">
      </el-table-column>
     <el-table-column prop="userName" label="员工账号" width="220">
      </el-table-column>
      <el-table-column prop="employeesName" label="员工姓名" width="220">
        <template slot-scope="scope">
          <div v-if="scope.row.id==inputHandle.id">
            <span v-if="modifyFlag">{{scope.row.employeesName}}</span>
            <el-input v-model="scope.row.employeesName" v-else value="text"></el-input>
          </div>
          <span v-else>{{scope.row.employeesName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="employeePosition" label="员工职位/权限" width="220">
      <template slot-scope="scope">
          <div v-if="scope.row.id==inputHandle.id">
            <span v-if="modifyFlag">{{scope.row.employeePosition}}</span>
            <el-select
            v-model="scope.row.employeePosition" v-else

   placeholder="选择员工角色"
   data-options="editable:false"
   value="text"

 >
   <el-option v-for="item in roleList"
              :key="item"
              :value="item"
              :label="item"

   >
   </el-option>
 </el-select>
          </div>
          <span v-else>{{scope.row.employeePosition}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="employeeContact" label="联系方式" width="150">
        <template slot-scope="scope">
          <div v-if="scope.row.id==inputHandle.id">
            <span v-if="modifyFlag">{{scope.row.employeeContact}}</span>
            <el-input v-model="scope.row.employeeContact" v-else value="text"></el-input>
          </div>
          <span v-else>{{scope.row.employeeContact}}</span>
        </template>
      </el-table-column>
       <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <template v-if="scope.row.id==inputHandle.id">
              <el-button
             @click="ModifyRow(scope.row)"
              v-if="modifyFlag"
              type="text"
              size="small"
        >
          修改
      </el-button>
      <el-button
          @click="save(scope.row)"
          v-else
          type="text"
          size="small"
      >
          保存
      </el-button>
        </template>

        <template v-else>
           <el-button
             @click="ModifyRow(scope.row)"
              type="text"
              size="small">
             修改
          </el-button>
        </template>
        <el-button
          @click="deleteRow(scope.row)"
          type="text"
          size="small"
      >
         删除
      </el-button>
      </template>
      </el-table-column>

    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 30, 40,50]"

        :page-size=this.page.pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.page.total"
      >
      </el-pagination>
    </div>
  </div>
</div>
</template>

<script>
import axios from '../../../axios'

export default {
  name: 'handle',
  inject: ['reload'],
  data () {
    return {
      tableData: [{}],
      keywords: '',
      searchBoolean: false,
      modifyFlag: true,
      inputHandle: { },
      dialogFormVisible: false,
      form: {
        userName: '',
        employeesName: '',
        employeeContact: '',
        employeePosition: '',
        userPassword: ''
      },
      roleList: [],
      formLabelWidth: '120px',
      multipleSelection: [],
      page: {
        // 当前页码
        currentPage: 1,
        // 每页条数
        pageSize: 10,
        // 数据总条数
        total: 0,
        checked: true
      },
      delete: {
        id: '',
        pageSize: '',
        ids: []
      }
    }
  },
  methods: {
    handleSizeChange(val) {

      console.log('份额也'+this.page.pageSize)
      
    },
    delay () {
      this.keywords = '',

      axios({
        url: '/employee/query/QueryByBlurry',
        method: 'post',
        data:
                {
                  blurryString: this.keywords,
                  pageSize: this.page.pageSize,
                  currentPage: this.page.currentPage
                },
   

      }).then(res => {
        // 拿到后端分页数据
        this.tableData = res.data.data.records
        this.searchBoolean = true
        // 拿到后端数据总条数
        this.page.total = parseInt(res.data.data.total)
      })
    },
    role () {
      axios({
        url: '/role/queryName',
        method: 'get'
      }).then(res => {
        console.log(res)
        this.roleList = res.data.data
        console.log(this.roleList[0])
      }).catch(err => {
      //  console.log(err.response)
        /* this.$alert(err.response.data.msg, "请联系管理员", {
          confirmButtonText: '确定',
          callback: action => {

          }
        }); */
      })
    },
    add () {
      this.dialogFormVisible = !this.dialogFormVisible,
      this.role()
    },
    // 新增功能
    addUser (form) {
      console.log(form)
      if (form.userName !== '' && form.employeesName !== '' && form.employeeContact !== '' && form.employeePosition !== '' && form.userPassword !== '') {
        this.dialogFormVisible = false
        // 把form传给后端
        axios({
          url: '/employee/add',
          method: 'POST',
          data: JSON.stringify(this.form)
        }).then(res => {
          this.tableData = res.data.data.records
          this.page.total = parseInt(res.data.data.total)
          console.log(this.page.total)
        }).catch(err => {
          /*  console.log(err.response)
            this.$alert(err.response.data.msg, "请联系管理员", {
              confirmButtonText: '确定',
              callback: action => {

              }
            });  */
        })
        this.reload()
      } else {
        this.$message.error('任何一个输入框都不能为空！')
      }
    },
    // 搜索
    serarch () {
      axios({
        url: '/employee/query/QueryByBlurry',
        method: 'post',
         data:
                {
                  blurryString: this.keywords,
                  pageSize: this.page.pageSize,
                  currentPage: this.page.currentPage
                },
     

      }).then(res => {
        // 拿到后端分页数据
        this.tableData = res.data.data.records
        this.searchBoolean = true
        // 拿到后端数据总条数
        this.page.total = parseInt(res.data.data.total)
      })
    },
    // 模糊查询
    goSearch () {
      this.page.currentPage = 1,
      this.serarch()
    },
    // 修改和保存
    save (row) {
      // 保存的修改
      console.log(row)
      this.$message.success('保存成功'),
      axios({
        url: '/employee/update',
        method: 'POST',
        data: JSON.stringify(row)
      }).then(res => {
        console.log('ceshi')
      })
      this.modifyFlag = !this.modifyFlag
    },
    ModifyRow (row) {
      this.modifyFlag = !this.modifyFlag,
      this.inputHandle = row,
      this.role()
    },
    // 单行删除
    deleteRow (val) {
      // 删除的id
      this.delete.id = val.id
      // 刷新的页面条数,page定义要在del后
      this.delete.pageSize = this.page.pageSize
      console.log(this.delete)
      axios({
        url: '/employee/delete',
        method: 'delete',
        data: {
          data: this.delete
        }
      }).then(res => {
        this.tabledata = res.data.data.records
        this.page.total = parseInt(res.data.data.total)
      })
      this.reload()
    },
    // 批量删除
    allRemove () {
      this.delete.pageSize = this.page.pageSize

      axios({
        url: '/Employee/deleteList',
        method: 'delete',
        data: {
          data: this.delete
        }
      }).then(res => {
        this.tabledata = res.data.data.records
        this.page.total = parseInt(res.data.data.total)
      })
      this.reload()
    },
    handleSelectionChange (val) {
      var array = []
      this.multipleSelection = val
      val.forEach(element => {
        array.push(element.id)
      })
      this.delete.ids = array
    },
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    // 条数选择
    // 条数选择
    handleSizeChange (val) {
      this.page.pageSize = val
      this.page.currentPage = 1
      if (this.searchBoolean) {
        // 如果执行了模糊查询则调用该接口分页
        this.serarch()
        return
      }
      axios({
        url: '/employee/query',
        method: 'get',
        // 上传page参数,让后端进行分页
        params: this.page
      }).then(res => {
        // 拿到后端分页数据
        this.tableData = res.data.data.records
        // 拿到后端数据总条数
        this.page.total = parseInt(res.data.data.total)
      }).catch(err => {
      /* this.$alert(err.response.data.msg, "请联系管理员", {
        confirmButtonText: "确定",
        callback: action => {

        }
      }); */
      })
    },

    // 下一页
    handleCurrentChange (val) {
      this.page.currentPage = val
      console.log(`当前页: ${val}`)
      if (this.searchBoolean) {
        // 如果执行了模糊查询则调用该接口分页
        this.serarch()
        return
      }
      axios({
        url: '/employee/query',
        method: 'get',
        // 需要想办法传入page对象
        params: this.page
      }).then(res => {
        this.tableData = res.data.data.records
      }).catch(err => {
        /* this.$alert(err.response.data.msg, "请联系管理员", {
                confirmButtonText: "确定",
                callback: action => {

                }
              }); */
      })
    }

  },
  created () {
    // 页面刷新时重置搜索框和按键状态
    this.keywords = '',
    this.searchBoolean = false,
    console.log(this.page)
    axios({
      url: '/employee/query',
      method: 'get',
      // 需要想办法传入page对象
      params: this.page
    }).then(res => {
      this.tableData = res.data.data.records
      this.page.total = parseInt(res.data.data.total)
      console.log(this.page.total)
    }).catch(err => {
      console.log(err)
      /*  this.$alert(err.response.data.msg, "请联系管理员", {
              confirmButtonText: '确定',
              callback: action => {

              }
            }); */
    })
  }
}
</script>
<style lang="less" >

.check9 {

  width: 1120px;
  margin: 30px auto;
  height: 700px;
  overflow: hidden;
  .cell
{
  font-weight: bold;
  font-size: 20px;
  color: rgb(61, 59, 59);
}
.el-pagination{
  .el-pagination__total{
  font-weight: bold;
  font-size: 20px;
  color: rgb(61, 59, 59);
}
.el-input__inner{
  font-weight: bold;
  font-size: 20px;
  color: rgb(61, 59, 59);
}
.button{
  font-weight: bold;
  font-size: 20px;
  color:rgb(61, 59, 59);
}
.el-pager
.number{
  font-weight: bold;
  font-size: 20px;

}
.el-pagination__jump{
  font-weight: bold;
  font-size: 20px;
  color:rgb(61, 59, 59);
}
}
   .search1 {
      float: left;
      margin-top: 30px;
      margin-left:30px;

      .searchForm {
        overflow: hidden;
        margin-right: 0px;

        input {
          box-sizing: border-box;
          width: 300px;
          height: 38px;
          padding: 0px 4px;
          border: 2px solid rgb(8, 138, 8);
          float: left;

          &:focus {
            outline: none;
          }
        }

        .btn {
          height: 38px;
          width: 68px;
          background-color: #0f778a;
          border: none;
          color: #fff;
          float: left;
          cursor: pointer;

          &:focus {
            outline: none;
          }
        }}}

    .table2{
           width: 1050px!important;
       }

 }

</style>
